<template>
    <div class="apply-cash">
        <ul class="allCommission">
            <li>奖励金总额</li>
            <li>￥
                <span>{{infor.fixedAssets}}</span>
            </li>
        </ul>
        <div class="recommend">
            <!-- <p>到账银行卡</p>
            <div class="cardid">{{bankCard}}
                <span></span>
            </div> -->
            <p class="txje">提现金额</p>
            <div class="txcash">￥
                <div class="cashnumber">{{checknum}}</div>
                <div class="checknum">
                    <span @click="checknum=checknum-100" v-show="checknum>0">-</span>
                    <span v-show="checknum<=0">-</span>
                    <span>{{checknum}}</span>
                    <span @click="checknum=checknum+100">+</span>
                </div>
            </div>
            <div class="checkMethod" @click="checkMethod">
                申请提现
            </div>
            <div class="word">
                * 会员和代理提现规则， 每月申请一次。 余额满100 以上可以申请， 打款时间每月25-30。
            </div>
        </div>

        <!-- 弹出层 -->
        <div class="mask" v-show="hidemask == false">
            <div class="sqtxalert">
                <div class="closeAlert" @click="reload()">确定</div>
            </div>
        </div>

    </div>
</template>

<script>
import http from "@/assets/js/axios";
import axios from 'axios'
import Qs from 'qs'
import { maskTips, maskCallback } from '@/assets/js/dom'
import $ from 'jquery'
import { domain } from '@/assets/js/config'
export default {
    data() {
        return {
            userToken:'',
            checknum: 100,
            hidemask: true,
            bankCard: '',
            infor: '',
            allYj: 0
        }
    },
    components: {

    },
    mounted: function () {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        if (!this.userToken) {
            this.$router.push('/login')
        }
        this.getBackCard()
        this.getAllYj()
        this.inforNow();
    },
    methods: {

        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        reload: function () {
            window.location.reload()
        },
        checkMethod: function () {
            if (this.checknum === 0) {
                maskTips({ id: 'numtoolittle', txt: '提现金额不能为0' })
                return false
            }
            this.getList()
        },
        inforNow: async function () {
            const res = await http.post('xshk/f/assets/query?token=' + this.userToken)
            // console.log(res);
            if (res.data.code == 0) {
                this.infor = res.data.data
            }
        },
        //调取接口
        getList: function () {
            var userToken = localStorage.getItem('token')
            var that = this
            let postDo = { balance: that.checknum }
            axios({
                url: domain + '/xshk/f/assets/balanceby?token=' + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify(postDo)
            }).then(res => { that.listsucc(res) }).catch(err => { that.listerr(err) })
        },
        //调取列表成功
        listsucc: function (res) {
            // console.log(res);
            if (res.data.code == 1) {
                maskTips({ id: 'money-less', txt: res.data.message })
            } else if (res.data.code == 0) {
                this.hidemask = false

            } else {
                maskTips({ id: 'other-err', txt: res.data.message })
            }

        },
        listerr: function (err) {
            console.log(err)
        },
        //拿取银行卡信息
        getBackCard: function () {
            var userToken = localStorage.getItem('token')
            var that = this
            axios({
                url: domain + '/xshk/f/agent/home/info?token=' + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                //data: Qs.stringify(postDo)
            }).then(res => { that.getCardSucc(res) }).catch(err => { console.log(err) })
        },
        getCardSucc: function (res) {
            this.bankCard = res.data.data.id_bank
        },
        //拿取佣金总额信息
        getAllYj: function () {
            var userToken = localStorage.getItem('token')
            var that = this
            axios({
                url: domain + '/xshk/f/agent/home/center?token=' + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                //data: Qs.stringify(postDo)
            }).then(res => { that.getYjSucc(res) }).catch(err => { console.log(err) })
        },
        getYjSucc: function (res) {
            this.allYj = res.data.data.money
        },
    }
}
</script>

<style lang='stylus' scoped>
.apply-cash {
    width: 100%;
    height: 100%;
    background: #f0f0f0;
    padding-top: 15px;
    position: relative;
    z-index: 99;

    .allCommission {
        width: 340px;
        height: 97px;
        background: #c3a368;
        border-radius: 5px;
        color: #fff;
        margin: 0 0 0 18px;
        text-align: center;

        li:first-child {
            font-size: 19px;
            padding-top: 20px;
        }

        li:last-child {
            font-size: 12px;
            margin-top: 17px;

            span {
                font-size: 23px;
            }
        }
    }

    .recommend {
        background: #ffffff;
        margin: 23px 18px 0 17px;
        padding: 23px 18px 19px 17px;

        p {
            font-size: 16px;
        }

        .cardid {
            font-size: 12px;
            color: #808080;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px dashed #ccc;

            span {
                float: right;
            }
        }

        .txje {
            margin-top: 35px;
        }

        .txcash {
            font-size: 20px;
            margin-top: 30px;
            border-bottom: 1px solid #E6E6E6;

            .cashnumber {
                display: inline-block;
                font-size: 30px;
            }

            .checknum {
                float: right;
                color: #999999;

                span {
                    border: 1px solid #999999;
                    padding: 0 10px;
                }
            }
        }

        .checkMethod {
            width: 306px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #aad112;
            color: #ffffff;
            font-size: 16px;
            border-radius: 5px;
            margin: 29px 0 0 0;
        }
    }

    .word {
        margin-top: 17px;
        padding: 5px;
        background-color: #fff;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
    }
}

.mask {
    position: fixed;
    box-sizing: border-box;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.59);
    color: rgb(232, 232, 232);
    font-family: Menlo, Consolas, monospace;
    font-size: large;
    line-height: 1.2;
    white-space: pre-wrap;
    overflow: auto;
    z-index: 99;

    .sqtxalert {
        width: 256px;
        height: 164px;
        background: url('../../assets/imgs/agent/sqtxalert.png');
        background-size: 100% 100%;
        position: absolute;
        left: 59px;
        top: 266px;

        .closeAlert {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-top: 1px solid #dddddd;
            color: #aad112;
            position: absolute;
            bottom: 0;
        }
    }
}
</style>
